<template>
  <div class="muzi">
    <el-form :model="form" :rules="rules" ref="FormHandle" v-loading="loading" label-width="100px">
      <el-row class="operating" :gutter="5">
        <el-col :span="8">
          <el-form-item label="姓名" prop="name" required>
            <el-autocomplete v-model="form.name" :fetch-suggestions="onFilter" placeholder="请输入关键字" @select="onSelected" highlight-first-item/>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="证件类型" prop="type" required>
            <el-select v-model="form.type" disabled placeholder="请选择证件类型">
              <el-option-group v-for="group in options.IdentityType" :key="group.label" :label="group.label">
                <el-option v-for="item in group.options" :key="item.value" :label="item.label" :value="item.value"/>
              </el-option-group>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="证件号码" prop="identity" required>
            <el-input v-model="form.identity" disabled clearable/>
          </el-form-item>
        </el-col>
      </el-row>

      <muzi-divide name="专项扣除项"/>
      <el-row class="operating" :gutter="5">
        <el-col :span="8">
          <el-form-item label="养老保险" prop="endowment" required>
            <el-input v-model="form.endowment" type="number" clearable/>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="医疗保险" prop="medical" required>
            <el-input v-model="form.medical" type="number" clearable/>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="失业保险" prop="unemployment">
            <el-input v-model="form.unemployment" type="number" clearable/>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="住房公积金" prop="accumulation">
            <el-input v-model="form.accumulation" type="number" clearable/>
          </el-form-item>
        </el-col>
      </el-row>

      <muzi-divide name="专项附加扣除项"/>
      <el-row class="operating" :gutter="5">
        <el-col :span="8">
          <el-form-item label="子女教育" prop="children">
            <el-input v-model="form.children" type="number" clearable/>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="继续教育" prop="continuing">
            <el-input v-model="form.continuing" type="number" clearable/>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="赡养老人" prop="elderly">
            <el-input v-model="form.elderly" type="number" clearable/>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="住房租金" prop="rent">
            <el-input v-model="form.rent" type="number" clearable/>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="住房贷款利息" prop="loans">
            <el-input v-model="form.loans" type="number" clearable/>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="其他" prop="other">
            <el-input v-model="form.other" type="number" clearable/>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-row class="operating" :gutter="5">
      <el-col :offset="20" :span="4">
        <el-button type="primary" :loading="saving" size="large" @click="onSubmit()">保存</el-button>
      </el-col>
    </el-row>
  </div>
</template>

<script>

import { IdentityType } from "@/data/employee";

export default {
  data() {
    return {
      id: null,
      saving: false,
      loading: false,
      form: {},
      rules: {
        name: [
          {required: true, message: '请输入名称'}
        ]
      },
      options: {
        IdentityType
      },
    }
  },
  mounted() {
    const digest = this.$route.params.digest;
    if (digest) {
      this.$API.employee.exemption.detail.get(digest).then(res => {
        if (res.success) return res.data;

        return this.$API.employee.detail.get(digest).then(res => {
          if (res.success) {
            let {id, digest, name, type, identity} = res.data;
            return {eid: id, digest, name, type, identity};
          }
        })
      }).then(form => (this.form = form))
    }
  },
  methods: {
    onSubmit() {
      this.$refs.FormHandle.validate(async (valid) => {
        if (valid) {
          this.saving = true;
          let res = await this.$API.employee.exemption.create.post(this.form);
          this.saving = false;
          if (res.success) {
            this.$message.success("保存成功")
            this.$router.push({name: "employee", replace: true})
          } else {
            this.$alert(res.message, "提示", {type: 'error'})
          }
        }
      })
    },
    onFilter(str, callback) {
      if (str === '') callback(Array.of());
      this.$API.employee.list.get({ keyword: str }).then(res => {
        if (res.success) {
          const itemList = res.data.map(ele => ({ value: ele.name, link: ele }))
          console.info(itemList)
          callback(itemList);
        }
      })
    },
    onSelected({link}) {
      const { serial, name, type, identity } = link;
      this.form = {
        ...this.form, serial, name, type, identity
      }
    }
  }
}
</script>

<style lang="less" scoped>
.muzi {
  width: 75vw;
  height: 100%;
  margin: 45px auto;

  .operating {
    .el-button--large {
      width: 100%;
    }
  }
}
</style>
